<!-- 装箱信息 -->
<template>
  <div>
    <div class="title pl0">
      <h3>装箱信息</h3>
      <el-button type="text" v-if="isDisable" @click="handleEdit"
        >编辑</el-button
      >
    </div>
    <el-table
      :data="formData.productPackingInfoList"
      border
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column
        prop="cartonCode"
        width="150"
        align="center"
        label="纸箱名称"
      >
        <template slot-scope="scope">
          <el-select
                        filterable
            filterable
            v-model="scope.row.cartonCode"
            v-if="!isDisable"
            placeholder="请选择纸箱名称"
            size="small"
            @change="handleCartonNameChange(scope.row, scope.$index, $event)"
          >
            <el-option
              :label="item.cartonName"
              :value="item.cartonCode"
              v-for="(item, index) in cartonList"
              :key="index"
            />
          </el-select>
          <span v-else-if="cartonList.length > 0">{{
            querySelectName(
              cartonList,
              scope.row.cartonCode,
              "cartonName",
              "cartonCode"
            )
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="cartonWeight"
        width="150"
        align="center"
        label="纸箱重量"
      >
      <template slot-scope="scope">
        {{ !scope.row.cartonCode?'选择后显示': scope.row.cartonWeight}}
      </template>
      </el-table-column>
      <el-table-column
        prop="boxEqualPackages"
        width="150"
        align="center"
        :label="'每箱' + unitName + '数'"
      >
        <template slot-scope="scope">
          <el-input
            v-if="!isDisable"
            v-model="scope.row.boxEqualPackages"
            placeholder="请输入内容"
            size="small"
            @blur="calculation(scope.row, scope.$index)"
          />
          <span v-else>{{ scope.row.boxEqualPackages }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="school"
        width="150"
        align="center"
        :label="'每箱' + formModel.baseData.productUnit +'数'"
      >
        <template slot-scope="scope">
          <div>
            <el-input
              v-if="!isDisable"
              v-model="scope.row.boxEqualTags"
              placeholder="请输入内容"
              size="small"
            />
            <span v-else>{{ scope.row.boxEqualTags }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="describe" align="center" label="装箱描述">
        <template slot-scope="scope">
          <el-input
            v-if="!isDisable"
            v-model="scope.row.describe"
            placeholder="请输入内容"
            size="small"
          />
          <span v-else>{{ scope.row.describe }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" align="center" label="备注">
        <template slot-scope="scope">
          <el-input
            v-if="!isDisable"
            v-model="scope.row.remark"
            placeholder="请输入内容"
            size="small"
          />
          <span v-else>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100px"
        fixed="right"
        align="center"
        v-if="!isDisable"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="handleCopyRow(scope.row, scope.$index)"   v-if="formData.productPackingInfoList.length-1 != scope.$index"
            >复制</el-button
          >
          <el-button
            type="text"
            @click="handleDeleteRow(scope.row, scope.$index)"
            v-if="formData.productPackingInfoList.length-1 != scope.$index"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="footer mt16" v-if="!isDisable">
      <el-button size="small" @click="handleCancel">取消</el-button>
      <el-button size="small" class="ml16" type="primary" @click="handleSave"
        >保存</el-button
      >
    </div>
  </div>
</template>

      <script>
import { querySelectName } from "@/utils";
export default {
  props: {
    productCode: {
      type: String,
      default: () => {
        return "";
      },
    },
    isShowEdits:{
      type: Boolean,
      default: () => {
        return false;
      },
    },
    formModel: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    formModel: {
      handler(newVal, oldVal) {
        this.formData.productPackingInfoList = newVal.productPackingInfoList;
        this.formModel.baseData.productUnit = this.formModel.baseData.productUnit?this.formModel.baseData.productUnit:'枚'
        // this.calculation();
      },
    },
  },
  data() {
    return {
      querySelectName,
      formData: {
        productCode: this.productCode,
        productPackingInfoList: [],
      },
      cartonList: [], //纸箱列表
      isDisable: true,
    };
  },
  computed: {
    unitName() {
      let name;
      if (this.formModel.baseData.productStyle == 2) {
        name = "卷";
      } else {
        name = "包";
      }
      return name;
    },
  },
  created() {
    this.getCartonList();
  },
  methods: {
    getCartonList() {
      let query = {
        pageIndex: 1,
        pageSize: 99999,
        queryDataBaseFiled: "",
        likeWords: "",
        isShowDisabled: 1,
      };
      this.$api.business.GetPageCartonConfigurationList(query).then((res) => {
        this.cartonList = res.list;
      });
    },

    //取消
    handleCancel() {
      this.$confirm("信息尚未保存，是否保存?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.handleSave();
        })
        .catch(() => {
          this.isShowEdits = true
          this.$emit('showEditEvent',this.isShowEdits)
          this.getDetail(this.productCode);
          this.isDisable = true;
        });
    },

    //表格选择事件
    handlePriceChange(row, index, event) {
      if (index == this.formData.productPackingInfoList.length - 1) {
        this.formData.productPackingInfoList.push({
          productPackingID: 0,
          productPackingCode: "",
          productCode: this.productCode,
          cartonCode: "",
          boxEqualPackages: 0,
          boxEqualTags: 0,
          describe: "",
          remark: "",
        });
      }
    },

    //删除
    handleDeleteRow(row, index) {
      this.formData.productPackingInfoList.splice(index, 1);
    },

    //复制
    handleCopyRow(row, index) {
      this.formData.productPackingInfoList.splice(
        index,
        0,
        JSON.parse(JSON.stringify(row))
      );
    },

    //纸箱名称选择事件
    handleCartonNameChange(row, index, e) {
      this.cartonList.forEach((item) => {
        if (item.cartonCode == e) {
          row.cartonWeight = item.cartonWeight;
        }
      });
      if (index == this.formData.productPackingInfoList.length - 1) {
        this.formData.productPackingInfoList.push({
          productPackingID: 0,
          productPackingCode: "",
          productCode: this.productCode,
          cartonCode: "",
          boxEqualPackages: 0,
          boxEqualTags: 0,
          describe: "",
          remark: "",
        });
      }
    },

    //计算
    calculation(row, index) {
      // this.handlePriceChange(row, index, 0);
      if (this.formModel.baseData.productStyle == 2) {
        //卷式
        this.formData.productPackingInfoList.forEach((item) => {
          item.boxEqualTags =
            item.boxEqualPackages * this.formModel.baseData.pageEqualTags;
          item.describe =
            "1箱*" +
            item.boxEqualPackages +
            "卷*" +
            this.formModel.baseData.pageEqualTags +
            "枚";
        });
      } else {
        if (this.formModel.baseData.productUnit == "枚") {
          //单标
          this.formData.productPackingInfoList.forEach((item) => {
            item.boxEqualTags =
              item.boxEqualPackages *
              this.formModel.baseData.pageEqualTags *
              this.formModel.baseData.packageEqualPages;

            item.describe =
              "1箱*" +
              item.boxEqualPackages +
              "包*" +
              this.formModel.baseData.packageEqualPages +
              "张*" +
              this.formModel.baseData.pageEqualTags +
              "枚";
          });
        } else {
          this.formData.productPackingInfoList.forEach((item) => {
            item.boxEqualTags =
              this.formModel.baseData.pageEqualTags *
              this.formModel.baseData.packageEqualPages;
          });
          if (this.formModel.baseData.calculationMethod == 0) {
            this.formData.productPackingInfoList.forEach((item) => {
              item.describe =
                "1箱*" +
                item.boxEqualPackages +
                "包*" +
                this.formModel.baseData.packageEqualPages +
                "张*" +
                this.formModel.baseData.pageEqualTags +
                "套";
            });
          } else {
            this.formData.productPackingInfoList.forEach((item) => {
              item.describe =
                "1箱*" +
                item.boxEqualPackages +
                "包*" +
                this.formModel.baseData.packageEqualPages +
                "张*1/" +this.formModel.baseData.pageEqualTags+"套";
            });
          }
        }
      }
      // this.calculationDescribe(row);
    },

    calculationDescribe(row) {
      if (this.formModel.baseData.productStyle == 2) {
        row.describe =
          "1箱*" +
          row.boxEqualPackages +
          "卷*" +
          this.formModel.baseData.pageEqualTags +
          "枚";
      } else {
        if (this.formModel.baseData.productUnit == "枚") {
          row.describe =
            "1箱*" +
            row.boxEqualPackages +
            "包*" +
            this.formModel.baseData.packageEqualPages +
            "套";
        } else {
          if (this.formModel.calculationMethod == 0) {
            row.describe =
              "1箱*" +
              row.boxEqualPackages +
              "包*" +
              this.formModel.baseData.pageEqualTags +
              "张*" +
              this.formModel.baseData.packageEqualPages +
              "套";
          } else {
            row.describe =
              "1箱*" +
              row.boxEqualPackages +
              "包*" +
              this.formModel.baseData.pageEqualTags +
              "张*" +
              this.formModel.baseData.packageEqualPages /
                this.formModel.baseData.pageEqualTags +
              "套";
          }
        }
      }
    },

    //编辑
    handleEdit() {
      console.log(this.isShowEdits)
      if(this.isShowEdits){
        this.isDisable = false
        this.isShowEdits = false
        this.$emit('showEditEvent',this.isShowEdits)
        this.formData.productPackingInfoList.push({
        productPackingID: 0,
        productPackingCode: "",
        productCode: this.productCode,
        cartonCode: "",
        boxEqualPackages: 0,
        boxEqualTags: 0,
        describe: "",
        remark: "",
      });
      }else{
        this.$message.warning('有未保存的编辑，请保存后再编辑')
      }
    },

    //保存
    handleSave() {
      this.formData.productPackingInfoList.forEach((item, index) => {
        if (!item.cartonCode) {
          this.formData.productPackingInfoList.splice(index, 1);
        }
      });
      this.$api.business.UpdateProductPackingInfo(this.formData).then(() => {
        this.isShowEdits = true
        this.$emit('showEditEvent',this.isShowEdits)
        this.$message.success("保存成功");
        this.loading = false;
        this.getDetail(this.productCode);
        this.isDisable = true;
      });
    },

    //获取详情
    getDetail(id) {
      this.$emit('init','')
    },
  },
};
</script>

      <style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}
</style>
